<template>
	<div class="xiaoshibang">
		<div class="haowubang_header">
			<div class="haowubang_header1">
				<div>小时榜</div>
				<div>
					<el-date-picker
					  v-model="value2"
					  align="right"
					  type="date"
					  placeholder="选择日期"
					  :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div>数据说明<i class="el-icon-question"></i></div>
			</div>
			<div class="haowubang_header2">
				<el-tooltip class="item" effect="dark" content="小手手不要离开我,不然我会生气的,不给你刷新" placement="top-start">
					<div class="redianshi2_3">
						<span>
							<i class="el-icon-refresh-right"></i>
						</span>
						<span>刷新榜单</span>
					</div>
				</el-tooltip>
				<div v-loading.fullscreen.lock="fullscreenLoading" @click="xiazai" class="redianshi2_4"><i class="el-icon-printer"></i>导出数据</div>
			</div>
		</div>
		
		<div class="shijianduan">
			<div class="shijianduan1">
				时段
			</div>
			<div class="shijianduan2">
				<ul>
					<li v-for="(item,index) in shijian" :key="index">
						{{item}}
					</li>
				</ul>
			</div>
		</div>
		
		<div class="xiaoshibiao">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>排名</th>
						<th>达人</th>
						<th>
							<span>当前时段音浪收入<i class="el-icon-caret-bottom"></i></span>
						</th>
						<th>
							<span>观众数峰值<i class="el-icon-caret-bottom"></i></span>
						</th>
						<th>粉丝数</th>
						<th>
							<span>粉丝团人数<i class="el-icon-caret-bottom"></i></span>
						</th>
						<th>销量</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in xiaoshi" :key="index">
						<td>
							<img v-if="index==0" src="../../../assets/img/jinpai.png" />
							<img v-else-if="index==1" src="../../../assets/img/yinpai.png" />
							<img v-else-if="index==2" src="../../../assets/img/tongpai.png" />
							<span v-else>{{index+1}}</span>
						</td>
						<td>
							<img :src="item.img" />
							<span>{{item.name}}</span>
							<span>摄影</span>
						</td>
						<td>
							{{item.shu | guolv}}
						</td>
						<td>
							{{item.shu1 | guolv}}
						</td>
						<td>
							{{item.shu2 | guolv}}
						</td>
						<td>
							{{item.shu3 | guolv}}
						</td>
						<td>
							<img class="xianshuju1" src="../../../assets/img/shuju1.png" />
							<img class="xianshuju2" src="../../../assets/img/shuju2.png" />
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="fenye" style="text-align: center;">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :hide-on-single-page="yindi"
			  :current-page="currentPage4"
			  :page-sizes="[100, 200, 300, 400]"
			  :page-size="100"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="4001">
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:"xiaoshibang",
		data(){
			return{
				shu:154555,
				shijian:['00.00','01.00','02.00','03.00','04.00','05.00','06.00','07.00','08.00','09.00','10.00','11.00','12.00','13.00','14.00','15.00','16.00','17.00','18.00','19.00','20.00','21.00','22.00','23.00'],
				shujuxian:-1,
				
				fullscreenLoading:false,
				column:[
					{title:'排名',key:'id',type:'text'},
					{title:'头像',key:'img',type:'image',width:100,height:100},
					{title:'名称',key:'name',type:'text'},
					{title:'当前时段音浪收入',key:'shu',type:'text'},
					{title:'观众数峰值',key:'shu1',type:'text'},
					{title:'粉丝数',key:'shu2',type:'text'},
					{title:'粉丝团人数',key:'shu3',type:'text'},
				],
				xiaoshi:[
					{
						id:'1',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						name:'总地方儿童热特热热理',
						shu:12312312,
						shu1:4521312,
						shu2:3561211,
						shu3:5674523,
					},
					{
						id:'2',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						name:'加23423方式速度',
						shu:12312312,
						shu1:4521312,
						shu2:3561211,
						shu3:5674523,
					},
					{
						id:'3',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						name:'按时',
						shu:12312312,
						shu1:4521312,
						shu2:3561211,
						shu3:5674523,
					},
					{
						id:'4',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						name:'奚落',
						shu:12312312,
						shu1:4521312,
						shu2:3561211,
						shu3:5674523,
					},
					{
						id:'5',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						name:'东升',
						shu:345634,
						shu1:567,
						shu2:3453,
						shu3:23534,
					},
					{
						id:'6',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						name:'西夏',
						shu:2134234,
						shu1:234,
						shu2:6756756,
						shu3:234,
					}
				],
				
				//日期选择
				pickerOptions: {
				  disabledDate(time) {
					return time.getTime() > Date.now();
				  },
				  shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				  }, {
					text: '昨天',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24);
					  picker.$emit('pick', date);
					}
				  }, {
					text: '一周前',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				  }]
				},
				value1: '',
				value2: '',
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//数据图标hover效果
			$(".xianshuju1").hover(function(){
				$(this).css({"display":'none'});
				$(this).siblings(".xianshuju2").css({"display":'block'});
			},function(){
				$(this).css({"display":'block'});
				$(this).siblings(".xianshuju2").css({"display":'none'});
			})
			
			$("th:nth-of-type(3)").click(function(){
				$(this).css({
					'color':"#0091FF"
				})
				$(this).siblings().css({
					'color':"#333333"
				})
			})
			$("th:nth-of-type(4)").click(function(){
				$(this).css({
					'color':"#0091FF"
				})
				$(this).siblings().css({
					'color':"#333333"
				})
			})
			$("th:nth-of-type(6)").click(function(){
				$(this).css({
					'color':"#0091FF"
				})
				$(this).siblings().css({
					'color':"#333333"
				})
			})
			
			$(".shijianduan2 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color": "#fff",
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color": "#666",
				})
			})
			
			//刷新移上去
			$(".redianshi2_3").hover(function(){
				$(this).children("span:nth-of-type(1)").addClass('tian')
			},function(){
				$(this).children("span:nth-of-type(1)").removeClass("tian")
			})
		},
		
		methods:{
			shujudian(index){
				this.shujuxian=index;
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			xiazai(){
				//点击导出表格数据到exe表
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
					this.$message.success("数据导出成功！")
					
					this.table2excel(this.column, this.xiaoshi, "小时榜单")//生成Excel表格，自动下载
				}, 2000);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.xiaoshibang{
		
		.haowubang_header{
			padding: 0.8rem 2rem;
			background-color: #fff;
			border-bottom-left-radius:0.1rem ;
			border-bottom-right-radius:0.1rem ;
			border-bottom:1px solid #E7E7E7 ;
			
			.haowubang_header1{
				float: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				div:nth-of-type(1){
					color: #666;
					font-size: 0.4rem;
				}
				div:nth-of-type(2){
					color: #666;
					font-size: 0.4rem;
					margin: 0 1rem ;
				}
				div:nth-of-type(3){
					color: #666;
					font-size: 0.4rem;
					cursor: pointer;
					i{
						margin-left:0.2rem ;
					}
				}
				div:nth-of-type(3):hover{
					color: #0091FF;
				}
			}
			.haowubang_header2{
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.redianshi2_3{
					border: 1px solid #D4D4D4;
					border-radius:0.1rem ;
					padding: 0.1rem 0.3rem;
					margin-right:0.6rem ;
					box-sizing: border-box;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: space-around;
					
					@keyframes  dong{
						0%{
							transform: rotate(0deg);
						}
						100%{
							transform: rotate(1080deg);
						}
					}
					
					span:nth-of-type(1){
						display: block;
						font-size: 0.5rem;
						transition: all 2s ease;
						color: #0091FF;
					}
					.tian{
						animation: dong 2s ease;
					}
					span:nth-of-type(2){
						display: block;
						color: #0091FF;
						font-size: 0.4rem;
						margin-left:0.2rem ;
					}
				}
				.redianshi2_4{
					color: #666666;
					font-size: 0.4rem;
					padding: 0.1rem 0.3rem;
					border: 1px solid #D4D4D4;
					border-radius:0.1rem ;
					cursor: pointer;
					
					i{
						margin-right:0.2rem ;
					}
				}
				.redianshi2_4:hover{
					color: #fff;
					background-color: #0091FF;
				}
				
			}
		}
		.haowubang_header::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.shijianduan{
			display: flex;
			padding: 1rem 2.2rem 0 2.2rem;
			background-color: #fff;
			
			.shijianduan1{
				flex: 1;
				color: #333333;
				font-size: 0.4rem;
			}
			.shijianduan2{
				flex: 17;
				ul{
					list-style: none;
					
					li{
						cursor: pointer;
						float: left;
						margin-right:0.8rem ;
						margin-bottom:0.8rem ;
						color: #666666;
						font-size: 0.4rem;
						border-radius:0.1rem ;
						padding: 0.1rem 0.3rem;
					}
				}
				ul::after{
					content: "";
					display: block;
					clear: both;
				}
			}
		}
		
		.xiaoshibiao{
			margin-top:1rem ;
			background-color: #fff;
			border-radius:0.1rem ;
			
			table{
				width: 100%;
				padding: 0 0.8rem;
				
				th{
					padding: 1rem 0;
					color: #333333;
					font-size: 0.42rem;
					font-weight: normal;
				}
				th:nth-of-type(2){
					width: 10rem;
				}
				th:nth-of-type(3){
					cursor: pointer;
					
				}
				th:nth-of-type(4){
					cursor: pointer;
					
				}
				th:nth-of-type(6){
					cursor: pointer;
					
				}
				td{
					padding: 0.8rem 0;
					color: #333333;
					font-size: 0.4rem;
					text-align: center;
				}
				td:nth-of-type(1){
					width: 3rem;
				}
				td:nth-of-type(2){
					display: flex;
					align-items: center;
					img{
						width: 1.5rem;
						height: 1.5rem;
						border-radius:50% ;
					}
					span:nth-of-type(1){
						width: 5rem;
						margin: 0 0.4rem;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
					span:nth-of-type(2){
						padding: 0.05rem 0.3rem;
						border: 1px solid #999999;
						border-radius:0.1rem ;
						font-size: 0.35rem;
					}
				}
				td:nth-of-type(3){
					color: #000;
				}
				th:last-child{
					width: 1rem;
				}
				td:last-child{
					display: flex;
					text-align: center;
					img{
						margin-bottom:1rem ;
						width: 0.5rem;
						cursor: pointer;
					}
					.xianshuju2{
						display: none;
					}
				}
			}
		}
	}
</style>
